<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        数字1 ： <input type="text" v-model="num1"><br>
        数字1 ： <input type="text" v-model="num2"><br>
        比较大小 ： {{temp}}

    </div>
    <script src="js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: '比较大小案例',
                num1: 0,
                num2: 0,
                temp: ''
            },
            watch: {
                num1: {
                    immediate: true,
                    handler(val) {
                        let res = val - this.num2
                        // 这个箭头函数也不是Vue管理的，是js引擎复杂管理的，调用这个函数的还是widow
                        //箭头函数没有this，只能向上一级找this，上一级是num1，num1是Vue实例的属性所以this是Vue实例
                        setTimeout(() => {
                            if (res == 0) {
                                this.temp = val + '=' + this.num2
                            } else if (res > 0) {
                                this.temp = val + '>' + this.num2
                            } else {
                                this.temp = val + '<' + this.num2
                            }
                        }, 3000)
                    }
                }
            },
            num2: {
                immediate: true,
                handler(val) {
                    let res = this.num1 - val
                    //这里虽然是普通函数，但是这个函数并不是Vue管理的，是window负责调用的
                    //所以这个普通函数中的this是window
                    setTimeout(function () {
                        if (res == 0) {
                            this.temp = this.num1 + '=' + val
                        } else if (res > 0) {
                            this.temp = this.num1 + '>' + val
                        } else {
                            this.temp = this.num1 + '<' + val
                        }
                    }, 3000)
                }
            }
        })
    </script>
</body>

</html>